<template>
    <div id="app">
        <img v-if="false" alt="Vue logo" src="./assets/logo.png">
        <div>{{name}}</div>
        <div>{{count(3)}}</div>
        <div
                v-for="(item, index) in zhuangbi"
                :key="index"
        >
            {{index + ' : ' + item}}
        </div>
        <p></p>
        <p style="color: red;">input双向绑定：</p>
        <my-input v-model="haha" />
        <!--<my-input-->
            <!--:value="haha"-->
            <!--@input="onInput"-->
        <!--/>-->
        <div>{{haha}}</div>
        <p></p>
        <p style="color: red;">checkbox双向绑定-方式1：</p>
        <my-check-box v-model="changeV"></my-check-box>
        <div>{{changeV}}</div>
        <p></p>
        <p style="color: red;">checkbox双向绑定-方式2：</p>
        <new-check-box :checked.sync="newChecked"/>
        <div>{{newChecked}}</div>
        <p></p>
        <p style="color: red;">checkbox双向绑定-方式3：</p>
        <diy-check-box
                :diyCheck.sync="dCheck"
                :test.sync="test"
        ></diy-check-box>
        <div>{{dCheck}}</div>
        <div>{{test}}</div>
        <p></p>
        <p style="color: red;">.sync传对象：</p>
        <!--<compose v-model='Box' v-bind.sync="Box"/>-->
        <compose v-bind.sync="Box"/>
    </div>
</template>

<script>
    import test from "@/components/test";
    import test2 from "@/components/test2";
    import ajax from '@/axios/ajax'
    import MyInput from '@/components/MyInput'
    import MyCheckBox from '@/components/MyCheckBox'
    import NewCheckBox from '@/components/NewCheckBox'
    import DiyCheckBox from '@/components/DiyCheckBox'
    import Compose from '@/components/Compose'

    export default {
        name: 'App',
        components: { MyInput, MyCheckBox, NewCheckBox, DiyCheckBox, Compose },
        mixins: [test, test2],
        data() {
            return {
                zhuangbi: {
                    key1: 'hello1',
                    key2: 'hello2',
                },
                haha: '66666',
                changeV: true,
                newChecked: true,
                dCheck: true,
                test: '',
                Box: {
                    my: true,
                    new: true
                }
            }
        },
        created() {
            console.log('vue--created')

            ajax.post('132359.html')
        },
        methods: {
            count(val) {
                return val * val
            },
            onInput(e) {
                this.haha = e
            }
        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
